<template>
	<view class="ver-item" @click="onClickToDetail">
		<image :src="data.image" mode="aspectFill" class="ver-item__img"></image>
		<view class="ver-item__desc flex">
			<text class="ver-item__name">{{data.name}}</text>
			<view class="ver-item__status">{{data.status}}</view>
		</view>
		
		<view class="ver-item__desc flex">
			<text class="ver-item__date">{{data.date}}</text>
			<view class="ver-item__type">{{data.type}}</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	data: {
		type: Object,
		default: () => {}
	}
})
function onClickToDetail(){
	let id = 12;
	uni.navigateTo({
		url:`/pages/index/itemDetails/itemDetails?id=${id}`,
		success: () => {
			console.log('跳转到物品详情页成功！');
		},
		fail: () => {
			console.log('跳转到物品详情页失败！');
		}
	})
}
</script>

<style lang="scss" scoped>
.ver-item{
	width: 338rpx;
	height: 360rpx;
	background-color: #fff;
	border-radius: 20rpx;
	// border: 2rpx solid #797979;
	flex-shrink: 0;
	margin-bottom: 25rpx;
	&__img{
		width: 100%;
		height: 230rpx;
	}
	
	&__desc{
		width: 100%;
		box-sizing: border-box;
		padding-right: 37rpx;
		padding-left: 26rpx;
		justify-content: space-between;
		margin-bottom: 21rpx;
		
		&:nth-last-child(1){
			margin-bottom: 0;
		}
	}
	
	&__name{
		font-size: 24rpx;
	}
	
	&__status{
		width: 120rpx;
		height: 39rpx;
		line-height: 39rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		text-align: center;
		color: #333333;
		background-color: #d7d7d7;
	}
	
	&__date{
		font-size: 18rpx;
	}
	
	&__type{
		width: 120rpx;
		height: 35rpx;
		line-height: 35rpx;
		border-radius: 20rpx;
		font-size: 18rpx;
		text-align: center;
		background-color: #b4ddee;
		color: #333333;
	}
}
</style>